import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

import '@/style/main.css'
import 'element-plus/dist/index.css'

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

import Particles from "@tsparticles/vue3";
import { loadSlim } from "@tsparticles/slim";

import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(Particles, {
    init: async engine => {
        await loadSlim(engine)
    }
})
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
})

/**
 * 全局指令
 */

// 自定义指令用于高亮代码块并添加语言标识显示
app.directive('highlight', function (el) {
    const blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
        const codeClassList = block.classList;
        let language = 'Unknown';
        for (let i = 0; i < codeClassList.length; i++) {
            if (codeClassList[i].startsWith('language-')) {
                language = codeClassList[i].replace('language-', '');
                break;
            }
        }
        const langElement = document.createElement('span');
        langElement.classList.add('code-lang');
        langElement.textContent = language;
        const preElement = block.closest('pre');
        preElement.prepend(langElement);
        hljs.highlightBlock(block);
    });
});

app.mount('#app')

